<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*头部*/
        #header{
            background-color: blue;
        }

        #header h3{
            text-align: center;
            color: azure;
        }
        #header img{
            display: inline-block;
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        #header1{
            color: azure;
            margin: 30px;
            position: absolute;
            top: 27px;
            left:100px;

        }
        /*内容*/
        #body1 span{
            display: flex;
            justify-content: space-around;
        }

        #body1 div{
            width: 40px;
            height: 40px;
            margin: 50px auto;
            text-align: center;
        }
        #body1 img{
            width: 60px;
            height: 60px;
        }

        #body1 input{
            background-color: darkgrey;
            width: 100%;
            border-radius: 8px;
            font-size: 20px;
        }
        #body1 input:last-child{

            height: 50px;
            width: 100%;
            color: aliceblue;
            background-color: blue;
        }

        /*底部*/
        #fott{
            color: #8e8e8e;
        }

        .footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 4;
        }
        .footer .fonav {
            /*补充样式*/
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 50px;
            text-align: center;
            font-size: 12px;
            background: white;
            border-top: 1px solid #EEEDED;
        }
        .footer .footer-title {
            /*补充样式*/
            flex: 1;
            display: inline-block;
            color: #444444;
            padding: 30px 0 0 0;
        }
        .footer .footer0 {
            background: url(img/h1.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer1 {
            background: url(img/h2.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer2 {
            background: url(img/h3.png)no-repeat center 3px;
            background-size: 25px 25px;
        }
        .footer .footer3 {
            background: url(img/h4.png)no-repeat center 3px;
            background-size: 25px 25px;
        }

    </style>

</head>
<body>
        <div id="header">
            <h3>个人中心</h3>
            <img id="icon"  >
            <div id="header1">
                <h4 id="name"></h4>
                <h4 id="type"></h4>
            </div>
        </div>

        <div id="body1">

            <span>
                <div><img src="img/nav1.png">&nbsp;首页</div>
                <div><img src="img/nav2.png">&nbsp;帮助</div>
                <div><img src="img/nav3.png" >&nbsp;资料 </div>
            </span>

            <input id="sub" type="submit" value="退出登录" onclick="check()">
        </div>

        <div id="fott">
            <h1>说明</h1>
            <p>链接属于行内元素,但是此时需要宽度高度,因此需要模式转换.里面文字
                需要水平居中和垂直居中.因此需要单行文字垂直居中的代码.链接里面需
                要设置背景图片.因此需要用到背景的相关属性设置.鼠标经过变化背悬图
                片,因此需要用到链接伪类选择器.</p>

        </div>

        <footer class="footer">
            <div class="fonav">
                <a class="footer-title footer0 " href="./main.html">
                    首页 </a>
                <a class="footer-title footer1 " href="./wallet.html">
                    钱包 </a>
                <a class="footer-title footer2 " href="./market.html">
                    交易 </a>
                <a class="footer-title footer3 " href="mine.html">
                    我的 </a>
            </div>
        </footer>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
    function check() {
        alert("确认退出")
        localStorage.removeItem('name')
        location.href='login.html'
    }


    $('#name').text('用户名:'+localStorage.getItem('name'));
    var type=localStorage.getItem('type');
    if (type==1){
        type='学生'
    }else if (type==2){
        type='老师'
    }else if (type==3){
        type='工人'
    }

    $('#type').text('等级:'+type);
    $('#icon').attr('src',"../layui/chuangYeAdmin/img/"+localStorage.getItem('icon'));


</script>


</html>